<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>JUL Designer Help</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="shortcut icon" href="../media/favicon.ico" />
    <link type="text/css"
      href="https://fonts.googleapis.com/css?family=Roboto+Condensed%7CVarela"
      rel="stylesheet" />
    <style type="text/css">
html, body, h1, h2, h3, p, div, li {
	margin: 0;
	padding: 0;
}
body {
	padding: 1em;
	font-family: "Helvetica", Helvetica, sans-serif;
	font-size: 13px;
	color: #222222;
	background-color: #eeeeee;
}
div.section {
	margin: 1.5em 0;
}
div.section-2 {
	margin: 1em 0;
}
div.section-3 {
	margin: 0.5em 0;
}
.section ul {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.2em;
}
#content {
	max-width: 960px;
	margin: 0 auto;
}
#logo {
	height: 260px;
}
#logo-left {
	padding: 10px;
	float: left;
}
#logo-right {
	padding: 60px 0 0 20px;
	float: left;
}
logo-clear {
	clear: both;
}
h1 {
	font-family: "Roboto Condensed", Arial, sans-serif;
	font-size: 48px;
}
</style>
  </head>
  <body>
    <div id="content">
      <div id="top" class="section">
        <div id="logo">
          <div id="logo-left"> <img alt="JUL Designer"
              src="../media/jul224.png" height="224" width="240" /> </div>
          <div id="logo-right">
            <h1>JUL Designer</h1>
            <p>Version 1.0</p>
            <p>Copyright © 2014 <a target="_blank"
href="http://www.google.com/search?hl=en&amp;num=50&amp;start=0&amp;safe=0&amp;filter=0&amp;nfpr=1&amp;q=The+Zonebuilder+web+development+programming+IT+society+philosophy+politics">
                The Zonebuilder</a></p>
          </div>
        </div>
      </div>
      <div id="toc" class="section">
        <h2>Table of contents</h2>
        <ul>
          <li><a href="#about">About JUL Designer</a>
            <ul>
              <li><a href="#features">Features</a></li>
              <li><a href="#requirements">System requirements</a></li>
            </ul>
          </li>
          <li><a href="#new-project">Building a new project</a>
            <ul>
              <li><a href="#project-settings">Project settings</a></li>
              <li><a href="#parser-settings">Parser settings</a></li>
              <li><a href="#template">Choosing a template</a></li>
            </ul>
          </li>
          <li><a href="#frameworks">Frameworks</a>
            <ul>
              <li><a href="#framework-relation">Relation with a project</a></li>
              <li><a href="#framework-configuration">Configuring a
                  framework</a></li>
            </ul>
          </li>
          <li><a href="#advanced">Advanced topics</a>
            <ul>
              <li><a href="#separation">UI and logic separation</a></li>
              <li><a href="#tag">Class and tag names</a></li>
              <li><a href="#namespaces">Namespaces</a></li>
            </ul>
          </li>
          <li><a href="#interface">Elements of the interface</a>
            <ul>
              <li><a href="#value-box">The value box</a></li>
              <li><a href="#code-dialog">The code dialog</a></li>
              <li><a href="#find-name">The find box and the name box</a></li>
              <li><a href="#component-selects">Component select boxes</a></li>
              <li><a href="#copy-paste">Copy, paste and undo operations</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div id="about" class="section">
        <h2>About JUL Designer</h2>
        <p><a target="_blank"
            href="http://jul-javascript.googlecode.com/">JUL</a>
          Designer is a <a target="_blank"
            href="http://en.wikipedia.org/wiki/Rapid_application_development">RAD</a>
          tool used to visually build a JavaScript application.<br />
          Given a component based application running in an event-driven
          environment, JUL Designer helps you to generate the component
          tree with the attached event listeners. It also generates the
          JavaScript code for the current component tree.<br />
        </p>
        <div id="features" class="section-2">
          <h3>Features</h3>
          <ul>
            <li>Visually building an application</li>
            <li>Live testing of what you build</li>
            <li>Working with your preferred JavaScript component
              framework</li>
            <li>Can be used with tag based languages (HTML, XUL, SVG
              etc.)</li>
            <li>Generates the JavaScript code with option to separate UI
              layout and logic</li>
            <li>Copy, paste and undo operations for the components and
              their members</li>
          </ul>
        </div>
        <div id="requirements" class="section-2">
          <h3>System requirements</h3>
          <ul>
            <li>A CSS2 compliant web browser with JavaScript 1.5 or
              later engine</li>
            <li> A web server with PHP 5.2.0 or later extension</li>
            <li>1024x768 minimum resolution</li>
            <li>An Internet connection</li>
          </ul>
        </div>
        <div><a class="to-top" href="#top">Back to top</a></div>
      </div>
      <div id="new-project" class="section">
        <h2>Building a new project</h2>
        <p>A project is a component tree that, when instantiated,
          creates the JavaScript application.<br />
          In order to achieve this, JUL Designer generates the required
          JavaScript code on the fly, at every step when you are
          building the project. You can see and copy the code from the
          menu Project -&gt; View JavaScript.<br />
          Adding components to the component tree requires that you also
          configure the current framework to work with. To do this,
          please take a look at the topic about frameworks.<br />
        </p>
        <div id="project-settings" class="section-2">
          <h3>Project settings</h3>
          <p>The project settings are:<br />
          </p>
          <ul>
            <li> title (string) - the title of the project</li>
            <li>ns (string) - a unique dotted path that is the
              JavaScript namespace pf the project. See more at <a
                href="#namespaces">Namespaces</a> topic.</li>
            <li>init (function) - an entry point for launching the
              project. See the default value for a starting point.</li>
            <li>suggestedFramework (string) - a dotted path which is the
              JavaScript namespace of the framework to open when opening
              this project.<br />
            </li>
            <li>listenersProperty (string) - for an event-driven
              environments, the event listeners for each component will
              be grouped under this property</li>
            <li>noLogic (boolean) - do not separate logic from UI in the
              generated JavaScript code. This can be switched also
              during the project building from the menu Project -&gt;
              Don't separate logic.<br />
            </li>
          </ul>
        </div>
        <div id="parser-settings" class="section-2">
          <h3>Parser settings</h3>
          <p>These are the settings that allow the <a target="_blank"
              href="http://jul-javascript.googlecode.com/">JUL</a>
            parser to create and instantiate the component tree.<br />
          </p>
          <ul>
            <li>classProperty (string) - the name of the class property
              of the component</li>
            <li>defaultClass (string) - the name of the default class of
              the component when the class property is empty</li>
            <li>childrenProperty (string) - the name of the component
              property that contains its children components</li>
            <li>membersProperties (array) - Array of zero or more
              property names for other categories of component members</li>
            <li>idProperty (string) - the name of the ID property of the
              component<br />
            </li>
            <li>bindingPtoperty (string) -&nbsp; the name pf the binding
              ID property of the component. See the JUL documentation
              for more details.</li>
            <li>useTags (boolean) -&nbsp; whether the components are
              identified by a tag name besides their class</li>
            <li>tagProperty (string) - the name of the tag property if
              present</li>
            <li>customFactory (function) - by default, the components
              are instantiated using the 'new' constructor with the name
              of their class. Use a custom factory that gets the
              component config as an argument to return your component
              instance.</li>
            <li>topDown (boolean) - by default, the instantiation is
              done first for children, then for their parent. Set this
              true for a top-down instantiation.</li>
            <li>parentProperty (string) - the name of the property that
              will contain the parent instance of the component. Only
              relevant for the top-down instantiation.<br />
            </li>
          </ul>
        </div>
        <div id="template" class="section-2">
          <h3>Choosing a template</h3>
          <p>A template is an HTML page used to generate live testing of
            the project. The page accepts several template variables
            that are replaced sever-side with the actual values. Besides
            these variables, you should include in the page any scripts
            and styles required to actually draw the components of the
            project.<br />
            The template variables are:<br />
            <br />
          </p>
          <ul>
            <li>jul_script - script tag of the JUL library</li>
            <li>project_script - script tag referring to the current
              project code</li>
            <li>project_&lt;property&gt; - variables that match the
              properties in the project settings</li>
          </ul>
        </div>
        <div><a class="to-top" href="#top">Back to top</a></div>
      </div>
      <div id="frameworks" class="section">
        <h2>Frameworks</h2>
        <p>Frameworks are configuration objects that describe
          collections of components such as widget libraries or
          component libraries.</p>
        <div id="framework-relation" class="section-2">
          <h3>Relation with a project</h3>
          <p>Using a framework allows the user to add its components to
            the current project. The available components will appear in
            the 'Add component' scroll box. Also, if the framework
            specifies the means to get the component bounding rectangle,
            the component tree and the test panel will visually hint the
            selected component with a red rectangle.<br />
            The current framework will filter the list of available
            components in the 'Add component' scroll box depending on
            the selected component in the project.</p>
        </div>
        <div id="framework-configuration" class="section-2">
          <h3>Configuring a framework</h3>
          <p>The framework settings are:<br />
          </p>
          <ul>
            <li>title (string) - the title of the framework</li>
            <li>ns (string) - a unique dotted path representing the
              JavaScript namespace of the framework</li>
            <li>prependNS (boolean) - if true, the components will be
              added to the project with their full namespace as the
              class name. This has no effect if the project is using
              tags.</li>
            <li>getBoundingRect (function) - a custom function that gets
              the component instance as the parameter and returns its
              bounding rectangle</li>
          </ul>
          The framework components are managed from the 'Components'
          tab. Several members of a component configuration can inherit
          from similar members of one or more components. These
          inheritable members are: 'getBoundingRect', 'members',
          'events.<br />
          The members of a component configuration are:<br />
          <ul>
            <li>description (string) - component description</li>
            <li>restictParent array)_ - a name or an array of component
              names that can be the parent of the current component.
              Special value 'document' indicate the body element of the
              HTML page.</li>
            <li>inherits (string) - a name or an array of component
              names this component inherits from. All the component
              members and events will be calculated through inheritance
              when the component is added to the project's component
              tree.</li>
            <li>getBoundingRect (string) - the name of the component
              method or a custom function that returns its bounding
              rectangle. This inherits from the 'inherits' property and
              replaces the global function of the framework if
              specified.<br />
            </li>
          </ul>
          The descriptions of the component members and events are
          managed in the 'Members' and 'Events' tabs for each component.<br />
          For a component member, the description is:<br />
          <ul>
            <li>name (string) - member name</li>
            <li>description (string) - member description</li>
            <li>logic (boolean) - whether the member belongs to the
              logic part of the project</li>
            <li>required (boolean) - whether the member is required or
              not</li>
            <li>defaultValue (mixed) - a JavaScript value used for
              initialization</li>
            <li>template (string) - a format string used as a hint for
              editing</li>
          </ul>
          For a component event, the description is:<br />
          <ul>
            <li>name (string) - event name</li>
            <li>description (string) - event description</li>
            <li>template (string) - format string used as a hint for
              editing</li>
          </ul>
        </div>
        <div><a class="to-top" href="#top">Back to top</a></div>
      </div>
      <div id="advanced" class="section">
        <h2>Advanced topics</h2>
        <p>JUL Designer uses a JUL parser to render the component tree.
          To better understand using the designer, one should get
          accustomed with the parser specifics.<br />
        </p>
        <div id="separation" class="section-2">
          <h3>UI and logic separation</h3>
          <p>By default, a project separates the UI and logic members of
            each component into two properties of the project named 'ui'
            and 'logic'. The separation can be turned off from the
            project settings or on the fly from the menu Project -&gt;
            Don't separate logic.<br />
            The 'ui' property of the project contains the c9components
            as a tree of configuration objects. Each configuration
            object may have an ID or a binding ID which links the object
            with its logic part.<br />
            The 'logic' property of the project is a configuration
            object which has properties named the same as the IDs of he
            configuration objects in the 'ui' properrty. Inside these
            logic configuration objects, the designer puts all the
            members of the component marked as logic. Also, the
            listeners property goes in this place if not empty.<br />
            If the separation is turned off for some components, all
            their members go to the 'ui'&nbsp; property of the project.<br />
          </p>
        </div>
        <div id="tag" class="section-2">
          <h3>Class and tag names</h3>
          <p>There are two categories of frameworks the parser and,
            consequently, the designer works with: the frameworks where
            components are class instances, and XML based languages
            where components are identified by tags.<br />
            For the first category, the class name of a component is the
            name from the component configuration, optionally prefixed
            with the namespace of the framework (if prependNS is true).
            This name is also displayed as the label of the component in
            the component tree panel.<br />
            For the second category, the class name is always the XML
            namespace of the framework (eg. 'html', 'svg', 'xul' etc.).
            In addition, each component has a tag property which is the
            component name from the framework. The 'prependNS' setting
            is ignored, but, in the component tree panel, the components
            with a different XML namespace than the default class of the
            project are prefixed with their class name and a colon (e.g.
            'svg:path' ).<br />
            For both categories, if a component has the same class as
            the default class of the project, the class property will be
            striped from the component configuration.<br />
          </p>
        </div>
        <div id="namespaces" class="section-2">
          <h3>Namespaces</h3>
          <p>Both projects and frameworks are uniquely identified with
            their JavaScript namespaces.<br />
            A namespace is a string of ldentifiers or integers separated
            with dots.<br />
            Starting from the global object in the page (i.e. the
            window), these segments separated by dots are objects that
            can be found by resolving the current segment as the
            property of the current object.<br />
            The project uses its namespace to generate and to separate
            its JavaScript code from the other scripts. The project
            namespace also has the following properties:<br />
          </p>
          <ul>
            <li>'parserConfig' - the parser configuration</li>
            <li>'ui' - the UI part of the project</li>
            <li>'logic' - the logic part of the project</li>
          </ul>
          <p>The framework namespace is mostly informative to what
            concerns the generated code, but may be used to construct a
            full class name for the components.<br />
          </p>
        </div>
        <div><a class="to-top" href="#top">Back to top</a></div>
      </div>
      <div id="interface" class="section">
        <h2>Elements of the interface</h2>
        <p>The interface manipulates JavaScript objects, so, some
          elements are specific to that scope.<br />
          Editing operations (copy, cut, paste, remove etc.), all work
          with JavaScript objects, aiming complete control over the
          generated code.<br />
        </p>
        <div id="value-box" class="section-2">
          <h3>The value box</h3>
          <p>Several parts of the interface have a 'Value' column with
            value boxes, one for each row. The type of value box depends
            on the JavaScript type of the value behind it.<br />
            The types of value boxes are:<br />
          </p>
          <ul>
            <li>editable text box - for JavaScript types 'String' and
              'Number'</li>
            <li>check box - for JavaScript type 'Boolean'</li>
            <li>read-only text box - for the rest of JavaScript types</li>
          </ul>
          When possible. the text for complex types is displayed in a
          friendly format.<br />
          If a field is empty but it has a default value, the text box
          will hint that value as italics text.<br />
          For the fields with read-only box, the only means of editing
          is the code button next to the value box.<br />
        </div>
        <div id="code-dialog" class="section-2">
          <h3>The code dialog</h3>
          <p>The values in the value boxes can also be edited using the
            code buttons (...) in the 'Code' column. This launches the
            code dialog that allows editing a JavaScript expression.<br />
            You may fill any JavaScript code that evaluates to a valid
            expression. If the type of resulting value differs from the
            original, the corresponding value box will reflect the
            change.<br />
            Clearing the dialog box will delete the object member unless
            the field has a required default value which, in that case,
            will be assigned to the member.<br />
          </p>
        </div>
        <div id="find-name" class="section-2">
          <h3>The find box and the name box</h3>
          <p>At the top of the component tree, near the buttons 'Up',
            'Down', 'Remove', 'Find', there is the find text box. It
            performs a cyclic search for the next component with an ID
            or a binding ID the same as that entered in the box.<br />
            At several parts in the interface, near the buttons 'Add',
            'Remove', 'Change', there is the name text box. It acts on
            the items of the list box in the selected tab below. If an
            item is selected and you press 'Enter' in the name text box,
            the item name will change if possible. If no item is
            selected or if you press 'Shift+Enter' a new item is added.
            If the name isn't valid, it will be automatically generated.<br />
          </p>
        </div>
        <div id="component-selects" class="section-2">
          <h3>The Component select boxes</h3>
          <p>At the top of the component tree, there is a series of
            three select boxes that spells: "Show 'children' in 'UI' as
            'Array'".<br />
            The first select box chooses what category of descendents to
            show for the current component.<br />
            The second select box changes the appartenence of the
            previous category either to UI or to logic.<br />
            The third select box changes the type of selected category
            either to 'Array' or to 'Object'. Look at the generated
            JavaScript to see the results.<br />
          </p>
        </div>
        <div id="copy-paste" class="section-2">
          <h3>Copy, paste and undo operations</h3>
          <p>The copy, cut, paste, remove operations are split in two
            groups. First group operates on the components in the
            component tree, the second one processes the members of a
            component.<br />
            A component is copied and pasted with all its descendant
            components. Also, any operation in the component tree takes
            a component together with its sub-tree.</p>
          <p>The copy-paste operations on the component members allow
            copying and pasting multiple members to any component in the
            project. They exclude however certain special properties
            meaningful to the JUL parser such as: the class, the tag,
            the children property, other 'members' properties, ID
            properties.<br />
            The undo operation undoes the last altering operation
            regardless of its kind.<br />
          </p>
        </div>
        <div><a class="to-top" href="#top">Back to top</a></div>
      </div>
    </div>
  </body>
</html>
